<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>11.dataset数据集</title>
</head>
<body>
  <div id="charts1" style="width:600px;height:400px;border:1px solid #f00"></div>
  <script src="./echarts/echarts.min.js"></script>
  <script>
    // 1. 获取页面中的标签对象并初始化
    const myChart = echarts.init(document.getElementById('charts1'));

    // const option = {}
    // 2. 根据参数绘制图形
    myChart.setOption({
      xAxis: {
        // data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        type: 'category' // 根据分类进行呈现
      },
      yAxis: {
        // data:[100,200,300,400,500,600,700,800,900,1000,1100,1200]
      },
      dataset: {
        source: [
          ['Jan', 34, 20, '小米', 52],
          ['Feb', 28, 14, '华为', 54],
          ['Mar', 45, 32, '中兴', 50],
          ['Apr', 69, 46, 'OPPO', 42],
          ['May', 39, 24, 'VIVO', 43],
          ['Jun', 43, 23],
          ['Jul', 33, 23],
          ['Aug', 23, 13],
          ['Sep', 23, 16],
          ['Oct', 33, 20],
          ['Nov', 39, 24],
          ['Dec', 62, 65]
        ]
      },
      series: [
        {
          type: 'bar',
          // data: [20, 14, 32, 46, 24, 23, 23, 13, 26, 20, 24, 15]
          encode: { x: 0, y: 2 }
        },
        {
          type: 'line',
          // data: [34, 28, 45, 69, 39, 43, 33, 23, 23, 33, 39, 22]
          encode: { x: 0, y: 1 }
        },
        {
          type: 'pie',
          center: ['65%', 60],
          radius: 55,
          // data: [
          //   { name: '小米', value: 52 },
          //   { name: '华为', value: 54 },
          //   { name: '中兴', value: 50 },
          //   { name: 'OPPO', value: 42 },
          //   { name: 'ViVo', value: 43 }
          // ]
          encode:{itemName:3,value:4}
        }
      ]
    })
  </script>
</body>
</html>